<template>
  <div class="topic" style="padding: 15px 20px 20px 20px;">

    <!--1.搜索 -->
    <el-card id="searchForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="主题">
          <el-input v-model="inputContent" placeholder="请输入主题" v-model.trim="inputContent" clearable size="mini">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn" disabled>搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click.native="reactBtn" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card>
      <el-table class="tabBox"
        :data="tables[0].slice((pagination.currentPage - 1) * pagination.limit, pagination.currentPage*pagination.limit)"
        :header-cell-style="{background:'#f8f8f9',color:'#606266',fontSize: 14,}" v-loading="isLoading"
        style="width: 100%;" border>
        <el-table-column prop="node" label="节点" align="center" width="280">
        </el-table-column>
        <el-table-column prop="topic" label="主题">
        </el-table-column>
        <table>
        </table>
      </el-table>
      <!-- 分页 -->
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-size.sync="pagination.limit"
        :total="pagination.total" :current-page.sync="pagination.currentPage" @size-change="handleSizeChange"
        @current-change="changePage" hide-on-single-page background>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Topic",
  data() {
    return {
      //搜索
      searchContent: "",//要搜索的值
      inputContent: "",//搜索输入框的值
      //表格
      tableData: [],
      isLoading: false,//表格加载中
      //分页
      pagination: {
        page: 1,//当前展示第几页
        limit: 10,//每页10条
        total: 0,//总条数
        currentPage: 1,//当前页
      }
    }
  },
  computed: {
    tables() {
      const search = this.searchContent;
      //当将input框清空时，使列表自动展示搜索前的完整数据，并返回至首页，防止叠加搜索
      if (this.inputContent == '') {
        this.searchContent = ''
        this.pagination.currentPage = 1;
        return [this.tableData, this.pagination.total = this.tableData.length];
      }
      if (search !== '') {
        this.pagination.currentPage = 1;
        return [this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        }),
        this.pagination.total = this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        }).length];
      }
      return [this.tableData, this.pagination.total = this.tableData.length];
    }
  },
  methods: {
    // 获取数据
    async init() {
      this.isLoading = true;
      try {
        let { code, data, meta } = await this.$api.topic.clientList();
        if (+code === 0) {
          this.pagination.total = +meta.count;
          this.tableData = data;
        } else {
          this.pagination.total = 0;
          this.tableData = [];
        }
      } catch (error) { }
      this.isLoading = false;
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
    },
    changePage(val) {
      this.pagination.page = val;
    },
    // 搜索
    searchFn() {
      // this.searchContent = this.inputContent
    },
    // 重置
    reactBtn() {
      this.inputContent = "";
      this.init();
    },
  },
  created() {
    this.init();
  }
};
</script>


<style lang="less" scoped>
.el-pagination {
  text-align: right;
  margin-top: 20px;

}

/deep/.el-card .el-form-item {
  margin-bottom: 0px;
}

.topic {
  width: 98%;
  margin: auto;
}

.el-card {
  margin-bottom: 10px;
}

/deep/#searchForm .el-form-item__label {
  font-weight: bold;
}
</style>